---
title: VictorySelectionContainer
---

Enables selecting data points within a highlighted region.

:::info
For examples of `VictorySelectionContainer` in action, visit the [containers](/docs/guides/containers) guide.
:::

## Inherited Props

<CommonProps
  interfaces={["VictoryContainerProps"]}
  overrides={[]}
/>

## Component Props

---

### activateSelectedData

<Badges>
  <TypeBadge value="boolean" />
  <DefaultsBadge value="true" />
</Badges>

When the `activateSelectedData` prop is set to true, the `active` prop will be set to true on all selected data points. When this prop is set to false, the `onSelection` and `onSelectionCleared` callbacks will still fire, but no mutations will occur via Victory's event system.

---

### disable

<Badges>
  <TypeBadge value="boolean" />
</Badges>

When the `disable` prop is set to `true`, `VictorySelectionContainer` events will not fire.

---

### onSelection

<Badges>
  <TypeBadge value="function" />
</Badges>

The `onSelection` prop accepts a function to be called whenever new data points are selected. The
function is called with the parameters `points` (an array of objects with `childName`, `eventKey`,
and `data`), `bounds` (an object with min / max arrays specified for `x` and `y`), and `props` (the props used by `VictorySelectionContainer`)

_example:_ `onSelection={(points, bounds, props) => handleSelection(points, bounds, props)}`

---

### onSelectionCleared

<Badges>
  <TypeBadge value="function" />
</Badges>

The `onSelectionCleared` prop accepts a function to be called whenever the selection is cleared. The function is called with the props used by `VictorySelectionContainer`

_example:_ `onSelectionCleared={(props) => handleSelectionCleared(props)}`

### selectionBlacklist

`type: array[string]`

<Badges>
  <TypeBadge value="function" />
</Badges>

The `selectionBlacklist` prop is used to exclude data from potential selections. This prop should be given as an array of strings that match the `name` prop of Victory component that should be excluded from selection.

_example:_ `selectionBlackList={["first-line", "second-line"]}`

---

### selectionComponent

<Badges>
  <TypeBadge value="ReactElement" />
  <DefaultsBadge value="<rect/>" />
</Badges>

The `selectionComponent` prop specifies the element to be rendered for the selected area. When
this prop is not specified, a `<rect/>` will be rendered. This component will be supplied with the
following props: `x`, `y`, `width`, `height`, and `style`.

---

### selectionDimension

<Badges>
  <TypeBadge value='"x" | "y"`' />
</Badges>

When the `selectionDimension` prop is set, the selection will only take the given dimension into account.
For example, when `dimension` is set to "x", the selected area will cover the entire y domain
regardless of mouse position.

_example:_ `selectionDimension="x"`

```jsx live
<VictoryChart
  containerComponent={
    <VictorySelectionContainer selectionDimension="x" />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: {
        fill: ({ active }) =>
          active ? "tomato" : "gray",
      },
    }}
  />
</VictoryChart>
```

---

### selectionStyle

<Badges>
  <TypeBadge value="object" />
  <DefaultsBadge value='{stroke: "transparent", fill: "black", fillOpacity: 0.1}' />
</Badges>

The `selectionStyle` prop should be given as an object of style attributes to be applied to the
`selectionComponent`

```jsx live
<VictoryChart
  containerComponent={
    <VictorySelectionContainer
      selectionStyle={{
        fill: "tomato",
        fillOpacity: 0.5,
        stroke: "tomato",
        strokeWidth: 2,
      }}
    />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: {
        fill: ({ active }) =>
          active ? "tomato" : "gray",
      },
    }}
  />
</VictoryChart>
```
